<template>
	<div style="height: 100vh;margin-bottom: 6.25rem;">
		<el-dialog title="修改课程" :visible.sync="dialogVisible" width="35%" :before-close="handleClose">
			<div class="course-cover-uploader">
				<div class="el-upload el-upload--text">
					<img :src="dialogImageUrl" />
					<el-upload :show-file-list="false" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" action="http://101.43.71.61:8080/minio/upload"
					 :on-success="success" :headers="myHeader">
						<el-button type="primary" style="height: 2.6rem;text-align: center;margin-top: 1.875rem;background-color:  #03d3bd;border: none;color: white;">上传封面</el-button>
					</el-upload>
				</div>
			</div>
			<el-input v-model="courseName" placeholder="课堂名称" class="input"></el-input>
			<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 9}" placeholder="课程简称" v-model="courseDescribe" class="input">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false" style="color:#03d3bd;border: solid #03d3bd 0.0625rem;height: 2rem;">取 消</el-button>
				<el-button type="primary" @click="updateCourse()" style="background-color:  #03d3bd;border: none;color: white;height: 2rem;">确
					定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="参数占比" :visible.sync="dialogVisible1" width="35%" >
			<el-input v-model="propOfTaskPoints" placeholder="请输入任务点占比" class="input"></el-input>
			<el-input v-model="propOfPeriodTest" placeholder="请输入课时测验占比"  class="input"></el-input>
			<el-input v-model="propOfTask" placeholder="请输入作业占比"  class="input"></el-input>
			<el-input v-model="propOfExam" placeholder="请输入考试占比"  class="input"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible1 = false" style="color:#03d3bd;border: solid #03d3bd 0.0625rem;height: 2rem;">取 消</el-button>
				<el-button type="primary" @click="updateCourseProp()" style="background-color:  #03d3bd;border: none;color: white;height: 2rem;">确
					定</el-button>
			</span>
		</el-dialog>
		<div class="kctext">课程封面</div>
		<div class="picture">
			<div class="imge">
				<img :src="Phone" alt="">
			</div>
			<div class="changehref">
				<!-- <div><a href="">修改封面</a></div> -->
				<div>
					<span>支持ip/jpegif/png格式建议单张图片不超过4M </span>
					<br>
					<span>课程封面图最佳尺寸: 800*480</span>
				</div>

			</div>
		</div>
		<div class="continer">

			<div class="kc">
				课程名称
				<div class="kccontent">
					{{CourseList.courseName}}
				</div>
			</div>
			<div class="kcteacher">
				课程教师
				<div class="perosn">
					{{TeachersName}}
				</div>
			</div>
		</div>
		<div class="explain">
			<span>课程说明</span>
			<div class="explainContent">{{CourseList.courseDescribe}}</div>
		</div>
		<button class="btn" @click="dialogVisible = true">编辑</button>
		<div class="result">
			<div class="one">
				<div class="oneContent">章节任务点</div>
				<div class="ipt"> <input :value="CourseList.propOfTaskPoints">%</div>
				<div class="something">按完成任务点的个数计分，部完成得满分</div>
			</div>
			<div class="one">
				<div class="oneContent">课时测验</div>
				<div class="ipt"> <input :value="CourseList.propOfPeriodTest">%</div>
				<div class="something">按所有课时测验类型任务点的平均分计分</div>
			</div>
			<div class="one">
				<div class="oneContent">作业</div>
				<div class="ipt"> <input :value="CourseList.propOfTask">%</div>
				<div class="something">按所有作业的平均分计分，或设置作业明细分配，按[作业成绩*权重比]之和计分</div>
			</div>
			<div class="one">
				<div class="oneContent">考试</div>
				<div class="ipt"> <input :value="CourseList.propOfExam">%</div>
				<div class="something">按所有考试的平均分计分，或设置考试明细分配，按[考试成绩*权重比]之和计分</div>
			</div>
		</div>
		<button class="btn" @click="dialogVisible1=true">编辑</button>
	</div>
</template>

<script>
	import {
		HttpManagerStudent
	} from "../../../../request/student.js"
	import {
		HttpManager
	} from "../../../../request/Teacher.js"
	export default {
		data() {
			return {
				courseId: window.localStorage.getItem("ClassId"),
				CourseList: {},
				Phone: "",
				dialogVisible: false,
				dialogImageUrl: "https://cdnoss.kaoshixing.com/ksx_prod/367700/file/sign/20211126/-1770398744.jpg",
				myHeader: {
					token: window.localStorage.getItem("token")
				},
				courseName: '',
				courseDescribe: '',
				TeachersName: '',
				dialogVisible1:false,
				propOfExam:'',
				propOfTask:'',
				propOfPeriodTest:'',
                propOfTaskPoints:''
			}
		},
		methods: {
			//获取课程信息
			getCourseInfByCourseId() {
				var parmas = {
					courseId: this.courseId
				}
				HttpManager.getCourseInfByCourseId(parmas).then(e => {
					console.log(e);
					this.CourseList = e.data.data;
					this.Phone = e.data.data.courseImg;
					this.courseName=e.data.data.courseName,
					this.courseDescribe=e.data.data.courseDescribe,
					this.dialogImageUrl=e.data.data.courseImg,
					this.propOfExam=e.data.data.propOfExam,
					this.propOfTask=e.data.data.propOfTask,
					this.propOfPeriodTest=e.data.data.propOfPeriodTest,
					this.propOfTaskPoints=e.data.data.propOfTaskPoints
				})

			},
			handleClose() {
				this.dialogVisible = true;
			},
			//图片上传成功
			success(response, file, fileList) {
				console.log(response);
				this.dialogImageUrl = response.data.url;
			},
			//获取教师名称
			getTeachersNameByCourseId() {
				var parmas = {
					courseId: this.courseId
				}
				HttpManagerStudent.getTeachersNameByCourseId(parmas).then(e => {

					this.TeachersName = e.data.data.join(',');
				})
			},
			//修改课程基本信息
			updateCourse() {
				this.dialogVisible = false;
				var parmas = {
					"courseDescribe": this.courseDescribe,
					"courseImg": this.dialogImageUrl,
					"courseName": this.courseName,
					'id': this.courseId
				};
				HttpManager.updateCourse(parmas).then(e => {
					console.log(e);
					this.$message({
						message: '修改成功',
						type: 'success'
					});
					this.getCourseInfByCourseId();
				})

			},
			updateCourseProp()
			{
				this.dialogVisible1 = false;
				var parmas = {
					"propOfExam": this.propOfExam,
					"propOfTask": this.propOfTask,
					"propOfPeriodTest": this.propOfPeriodTest,
					'id': this.courseId,
					"propOfTaskPoints": this.propOfTaskPoints
				};
				HttpManager.updateCourseProp(parmas).then(e => {
					console.log(e);
					this.$message({
						message: '修改成功',
						type: 'success'
					});
					this.getCourseInfByCourseId();
				})
			}

		},
		created() {
			this.getCourseInfByCourseId();
			this.getTeachersNameByCourseId();
		}
	}
</script>

<style scoped="scoped">
	.kctext {
		margin: 20px;
		font-weight: bold;
	}

	.el-button {
		height: 2rem;
	}

	.picture {
		display: flex;
		margin-left: 20px;
	}

	.changehref {
		margin-left: 30px;
		color: #BEAAB8;
		font-weight: lighter;
	}

	.changehref div :nth-child(2) {
		margin-top: 20px;
	}

	.continer {
		display: flex;
	}

	.kc {
		margin-left: 20px;
		margin-top: 20px;
		font-weight: bold;
	}

	.kccontent {
		margin-top: 15px;
		font-weight: lighter;
	}

	.kcteacher {
		margin-top: 20px;
		margin-left: 300px;
		font-weight: bold;
	}

	.perosn {
		margin-top: 15px;
		font-weight: lighter;
	}

	.explain {
		margin-top: 20px;
		margin-left: 20px;
		font-weight: bold;
	}

	.explainContent {
		margin-top: 20px;
		font-weight: normal;
		border: 1px solid #d5d5d5;
		border-radius: 10px;
		height: 50px;
		width: 300px
	}

	.btn {
		border-radius: 50px;
		background-color: #03D3BD;
		border: none;
		color: white;
		font-size: 15px;
		width: 100px;
		height: 30px;
		margin-left: 50px;
		margin-top: 25px;
	}

	input {
		width: 6.5rem;
		height: 30px;
	}

	.one {
		display: flex;
		margin-left: 20px;
	}

	.oneContent {
		width: 80px
	}

	.ipt {
		margin-left: 100px;

	}

	.something {
		margin-left: 200px;
	}

	button {
		margin-left: 50px;
		width: 100px;
		height: 25px;
		border-radius: 30px;
		background-color: #fff;
		color: blue;
		border: 1px solid blue;
	}

	.result>div {
		margin-top: 30px;
		margin-bottom: 1.875rem;
	}

	.imge {
		width: 14.25rem;
		height: 7.25rem;
	}

	.imge>img {
		width: 100%;
		height: 100%;
	}

	.course-add .el-form.base-form .course-cover-uploader,
	.course-add .el-form.exercise-form .course-cover-uploader {
		width: 400px;
		height: 120px;
		border-radius: 4px;
		background-image: url(https://s6.kaoshixing.com/static/vue/images/base/course-icon-picture.png?v=a69cd2a664);
		background-repeat: no-repeat;
		background-size: cover;

	}

	.el-upload {
		display: flex;
		justify-content: space-between;
		cursor: pointer;
	}

	.course-cover-uploader img,
	.course-add .el-form.exercise-form .course-cover-uploader img {
		width: 70%;
		height: 100px;
	}

	.input {
		margin-top: 1.25rem;
	}
</style>
